<template>
  <div>
    <!-- <h2>{{data.name}}今年{{data.age}}岁了</h2>
    <button @click="data.name+='y'">改名了</button>
    <button @click="data.age++">长大了</button>
    <h2>工作是{{data.job.jobName}},工资{{data.job.salary}}K</h2>
    <button @click="data.job.jobName+='高级'">升职</button>
    <button @click="data.job.salary++">涨工资</button> -->

    <!-- 用toRef -->
    <!-- <h2>{{data}}</h2>
    <h2>{{name}}今年{{age}}岁了</h2>
    <button @click="name+='y'">改名了</button>
    <button @click="age++">长大了</button>
    <h2>工作是{{jobName}},工资{{salary}}K</h2>
    <button @click="jobName+='高级'">升职</button>
    <button @click="salary++">涨工资</button> -->

    <!-- 用toRef -->
    <h2>{{data}}</h2>
    <h2>{{name}}今年{{age}}岁了</h2>
    <button @click="name+='y'">改名了</button>
    <button @click="age++">长大了</button>
    <h2>工作是{{job.jobName}},工资{{job.salary}}K</h2>
    <button @click="job.jobName+='高级'">升职</button>
    <button @click="job.salary++">涨工资</button>
  </div>
</template>

<script>
import { ref, reactive, toRef, toRefs} from 'vue';
export default {
  name: 'Demo',
  setup(){
    let data = reactive({
      name: "rock",
      age: 18,
      job: {
        jobName: "前端工程师",
        salary: 10
      }
    })

    // const name1 = data.name
    // console.log('name1',name1)

    // const name2 = toRef(data,'name')
    // console.log('name1',name2)

    return{
      data,
      // name: data.name,  // 相当于给name赋值字符串，并不能实现响应式，借助toRef
      
      // name: toRef(data, "name"),
      // age: toRef(data, "age"),
      // jobName: toRef(data.job, "jobName"),
      // salary: toRef(data.job, "salary")

      ...toRefs(data)  //不能直接toRefs(data)，toRefs(data)是对象，不能返回{对象},需要解构
    }
  },
}
</script>

<style>

</style>
